import React, { PureComponent }from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { List, Picker, TextareaItem, Button, Accordion, Steps, Icon } from 'antd-mobile';

const Item = List.Item;
const Step = Steps.Step;

const category = [
  [
    {
      label: '事假',
      value: '事假',
    },
    {
      label: '病假',
      value: '病假',
    },
  ],
]
export class MobileAddHoliday extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      category: undefined
    }
  }
  render() {
    const { onSelectDate, goBack, history} = this.props;
    let dateTips = undefined;
    let du = 0;
    if(onSelectDate.length === 0) {
      dateTips = '请选择'
    } else if (onSelectDate.length === 1) {
      dateTips = onSelectDate[0];
      du = '1';
    } else if (onSelectDate.length === 2) {
      dateTips = `${onSelectDate[0]}  ${onSelectDate[1]}`
      du = moment(moment(onSelectDate[1]) - moment(onSelectDate[0])).format('D');
    }
    return (
      <div>
        <List className="my-list">
          <Item wrap extra={<span style={{ color: '#BDBDBD'}} onClick={goBack}>{dateTips}</span>}>日期</Item>
          <Item wrap extra={<span style={{ color: '#BDBDBD'}}>{`${du}天`}</span>}>天数</Item>
          <Picker
            data={category}
            title="请选择假期的类别"
            cascade={false}
            extra={<span style={{ color: '#BDBDBD'}}>请选择</span>}
            value={this.state.category}
            onChange={v => this.setState({ category: v })}
            onOk={v => this.setState({ category: v })}
          >
            <Item>类别</Item>
          </Picker>
          <TextareaItem
            style={{textAlign: 'right'}}
            title="原因"
            placeholder="请填写"
          />
          <Item wrap  extra={<span style={{ color: '#BDBDBD'}}>请添加</span>}>证明</Item>
        </List>
        <div style={{padding: '7px', marginTop: '10px'}}>
          <Button onClick={() => history.push('/holiday/menu')} type='primary' size='small'>提交申请</Button>
        </div>
      </div>
    )
  }
}


export class MobileHolidayMenu extends PureComponent {
  render() {
    return (
      <div>
        <Accordion accordion>
          <Accordion.Panel header="2018-09-20">
            <Steps size="small" current={1}>
              <Step title="个人" description="申请已提交，请等待领导的审批。" />
              <Step title="主管" description="主管审批中..." />
              <Step title="总经理" description="总经理审批..." />
            </Steps>
          </Accordion.Panel>
          <Accordion.Panel header="2018-07-04">
            <Steps size="small">
              <Step title="个人" status="finish" icon={<Icon type='check-circle-o'/>} description="申请已提交，请等待领导的审批。" />
              <Step title="主管" status="finish" icon={<Icon type='check-circle-o'/>} description="主管已通过申请..." />
              <Step title="总经理" status="finish" icon={<Icon type='check-circle-o'/>} description="总经理已通过申请..." />
              <Step title="个人" status="finish" icon={<Icon type='check-circle-o'/>} description="申请已通过..." />
            </Steps>
          </Accordion.Panel>
          <Accordion.Panel header="2018-04-05">
            <Steps size="small" current={1}>
              <Step title="个人" status="finish" icon={<Icon type='check-circle-o'/>} description="申请已提交，请等待领导的审批。" />
              <Step title="主管" status="error" icon={<Icon type='cross-circle'/>} description="主管拒绝申请，原因： 业务繁忙。" />
              <Step title="总经理" status="finish"  description="总经理审批..." />
            </Steps>
          </Accordion.Panel>
        </Accordion>
      </div>
    )
  }
}
